'use client'

import React, { memo, useEffect } from 'react';
import { IArtwork } from '@/types/artwork';
import { useCarousel } from '@/hooks/useCarousel';

interface HeroCarouselProps {
  featuredWorks: IArtwork[];
}

const HeroCarousel: React.FC<HeroCarouselProps> = ({ featuredWorks }) => {
  const { currentIndex, goToSlide, goToPrevious, goToNext } = useCarousel({
    totalItems: featuredWorks.length,
    autoPlayInterval: 5000,
    enableAutoPlay: true,
  });

  // 键盘导航支持
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      switch (event.key) {
        case 'ArrowLeft':
          event.preventDefault();
          goToPrevious();
          break;
        case 'ArrowRight':
          event.preventDefault();
          goToNext();
          break;
        case 'Home':
          event.preventDefault();
          goToSlide(0);
          break;
        case 'End':
          event.preventDefault();
          goToSlide(featuredWorks.length - 1);
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [goToPrevious, goToNext, goToSlide, featuredWorks.length]);

  if (!featuredWorks || featuredWorks.length === 0) {
    return (
      <div className="h-96 bg-paper-dark flex items-center justify-center">
        <p className="text-ink-light">暂无推荐作品</p>
      </div>
    );
  }

  return (
    <div
      className="relative h-[80vh] overflow-hidden"
      role="region"
      aria-label="精选作品轮播"
      aria-live="polite"
    >
      {/* 轮播图片 */}
      <div className="h-full w-full">
        {featuredWorks.map((work, index) => (
          <div
            key={work.id}
            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
          >
            <div className="h-full w-full bg-black/20 flex items-center justify-center">
              <div className="container mx-auto px-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                  <div className="order-2 md:order-1">
                    <h1 className="text-4xl md:text-5xl font-bold mb-4 text-ink text-shadow">{work.title}</h1>
                    <p className="text-xl mb-6 text-ink-light">{work.artist} · {work.year}</p>
                    <p className="text-base mb-8 text-ink-light max-w-lg">{work.description.substring(0, 150)}...</p>
                    <button
                      className="bg-ink text-paper px-6 py-3 rounded-sm hover:bg-ink-light transition-colors duration-300"
                      aria-label={`查看${work.title}详情`}
                    >
                      查看详情
                    </button>
                  </div>
                  <div className="order-1 md:order-2">
                    <div className="relative">
                      {/* 这里使用占位符图片，实际项目中会使用真实图片 */}
                      <div className="bg-paper-dark aspect-[4/5] rounded-sm shadow-xl image-hover flex items-center justify-center">
                        <p className="text-ink-light">{work.title} - 图片占位</p>
                      </div>
                      <div className="absolute -bottom-4 -right-4 bg-wood p-3 rounded-sm shadow-md">
                        <p className="text-paper text-sm font-medium">{work.medium}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* 轮播控制按钮 */}
      <button
        onClick={goToPrevious}
        className="absolute left-4 top-1/2 -translate-y-1/2 z-20 bg-white/30 hover:bg-white/50 text-ink p-3 rounded-full transition-all duration-300"
        aria-label="上一个"
      >
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
      </button>

      <button
        onClick={goToNext}
        className="absolute right-4 top-1/2 -translate-y-1/2 z-20 bg-white/30 hover:bg-white/50 text-ink p-3 rounded-full transition-all duration-300"
        aria-label="下一个"
      >
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>

      {/* 轮播指示器 */}
      <div
        className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex space-x-2"
        role="tablist"
        aria-label="轮播指示器"
      >
        {featuredWorks.map((work, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={`w-3 h-3 rounded-full transition-all duration-300 ${index === currentIndex ? 'bg-ink scale-125' : 'bg-ink/30'}`}
            role="tab"
            aria-selected={index === currentIndex}
            aria-label={`切换到${work.title}`}
            tabIndex={index === currentIndex ? 0 : -1}
          />
        ))}
      </div>
    </div>
  );
};

export default memo(HeroCarousel);